<template>
  <div class="main-address-item">
    <div class="txt-box">
      <div class="first-line">
        <span class="name">{{ item.name }}</span>
        <span>{{ item.phone }}</span>
      </div>
      <div class="second-line">
        <span>{{ province }}</span>
        <span>{{ city }}</span>
        <span>{{ district }}</span>
        <span>{{ item.detail }}</span>
      </div>
    </div>
    <div class="icon-box">
      <div class="radio-box" checked-color="#ee0a24">
        <van-radio :name="item.address_id">默认</van-radio>
      </div>
      <div class="edit-box">
        <van-icon name="edit" />
        <span>编辑</span>
      </div>
      <div class="delete-box" @click="handleDeleteSon(item.address_id)">
        <van-icon name="delete-o" />
        <span>删除</span>
      </div>
    </div>
  </div>
</template>

<script>
import { IdToAddress } from '@/utils/address'

export default {
  name: 'AddressItem',
  data () {
    return {
      province: '',
      city: '',
      district: ''
    }
  },
  props: {
    item: {
      type: Object
    }
  },
  created () {
    const obj = IdToAddress(this.item.region_id.toString())
    this.city = obj.city
    this.district = obj.district
    this.province = obj.province
  },
  methods: {
    handleDeleteSon (id) {
      this.$emit('change', id)
    }
  }
}
</script>

<style scoped lang="less">
.main-address-item {
  width: 353px;
  height: 175px;
  padding: 22px 29px;
  margin: 14px 11px;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 11px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05);
  color: #303133;
  .txt-box {
    height: 85px;
    border-bottom: 1px solid #eee;
    .first-line {
      font-size: 22px;
      margin-bottom: 10px;
      .name {
        margin-right: 15px;
      }
    }
    .second-line {
      font-size: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      span {
        margin-right: 5px;
      }
    }
  }
  .icon-box {
    display: flex;
    font-size: 20px;
    margin-top: 20px;
    align-items: center;
    .radio-box {
      margin-right: 90px;
    }
    .edit-box {
      margin-right: 10px;
    }
  }
}
.area.van-picker.van-area {
  display: none;
}
</style>
